/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
    <view class="wrap">
        <view class="inputBox" >
            <view class="label">
                账号名：
            </view>
            <input type="text" placeholder="请输入手机号" placeholder-class="placeholder" v-model="mobile">
            <image :src="imgUrl+'common/gray_close.png'" class="close" @tap="clearMobile" v-if="isFlag"></image>
        </view>
        <view class="next" :class="[isFlag?'next-select':'']" @tap="next">下一步</view>
        <!-- 错误验证  -->
        <error-template ref="errorTem" :errorText="errorText" type="0"></error-template>
    </view>
</template>
<script>
import common from "@/common/common";
import sendSmsMixin from "@/mixin/sendSms.js";
import ErrorTemplate from "@/components/ErrorTemplate/ErrorTemplate";
import config from "@/api/config";
export default {
    data() {
        return {
            imgUrl:config.imgUrl,
            mobile:"",//手机号
            scene:2,
            errorText:"",
        }
    },
    mixins: [sendSmsMixin],
    components:{
        ErrorTemplate,
    },
    computed: {
        isFlag(){
            if(this.mobile.length>0){
                return true
            }else{
                return false
            }
        }
    },
    methods: {
        clearMobile(){
            this.mobile=""
        },
        next(){
            if(!this.isFlag){
                this.errorText="手机号不能为空";
                this.$refs.errorTem.open(3000)
                return
            }
            if(!(/^1[3456789]\d{9}$/.test(this.mobile))){
                // common.toast("","手机号码有误",3000)
                this.errorText="手机号码有误"
                this.$refs.errorTem.open(3000)
                return false;
            }
            let params={
                mobile:this.mobile,
				scene:this.scene
            }
            let url=`/pages/user/forgotPassword/forgotPswProcess-2?tel=${this.mobile}`
            this.sendSms(params,url)
        }
    },
}
</script>
<style lang="scss">
    page{
        background: #fff;
    }
    .wrap{
        margin: 0 70rpx;
    }
    .label{
        color: #333;
        font-size: 30rpx;
    }
    .placeholder{
        color: #CCCCCC;
        font-size: 30rpx;
    }
    input{
        color: #333333;
        font-size: 36rpx;
    }
    .inputBox{
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 35rpx 0;
        margin-bottom: 100rpx;
        margin-top: 60rpx;
        border-bottom: 1px solid #E6E6E6;
    }
    .next{
        width:610rpx;
        height:90rpx;
        line-height: 90rpx;
        background:#CCCCCC;
        border-radius:45rpx;
        text-align: center;
        font-size: 30rpx;
        color: #FFFFFF;
    }
    .next-select{
        background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,93,61,1) 100%);
        color: #fff;
    }
    .close{
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        position: absolute;
        right: 0;
        z-index: 2;
    }
</style>